<template>
  <div>

    <!-- 搜索框 -->
    <el-form :inline="true" :model="params" class="demo-form-inline" style="margin-left: 26px;margin-top: 20px;">
      <el-form-item label="标题">
        <el-input v-model="params.title" placeholder="按照标题查找"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button  @click="getList(1)" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add" icon="el-icon-plus">增加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="removeMore" icon="el-icon-delete">批量删除</el-button>
      </el-form-item>
    </el-form>

        <!-- 表格 -->
            <template>
              <el-table
                :data="rows"
                style="width: 1100px; margin-left: 26px; margin-top: 10px;"
                @selection-change="handleSelectionChange">
                <!-- <el-table-column
                  label="选中"
                >
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.checked"></el-checkbox>
                  </template>
                </el-table-column> -->
                <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                <el-table-column
                  label="图片"
                  prop="img">
                </el-table-column>
                <el-table-column
                  label="标题"
                  prop="title">
                </el-table-column>
                <el-table-column
                  label="跳转地址"
                  prop="url">
                </el-table-column>
                <el-table-column
                  label="是否启用"
                  prop="status">
                   <template slot-scope="scope">
                     <!-- 开关设置 -->
                    <el-switch
                      v-model="scope.row.status"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="statusChange(scope.row)"
                      :active-value="1"
                      :inactive-value="0"
                    >
                    </el-switch>
          </template>
                </el-table-column>
                <el-table-column label="操作" >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="edit(scope.row)"
                      icon="el-icon-edit" >编辑</el-button>
                   <el-popconfirm
                      title="确定删除此数据吗？"
                      @confirm="remove(scope.row)"
                    >
                      <el-button
                      style="margin-left:5px" 
                      slot="reference"
                      size="mini"
                      type="danger"
                      icon="el-icon-delete"
                      >删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </template>

            <div class="block" style="margin-left: 26px; margin-top:20px">
              <el-pagination
                @size-change="sizeChange"
                @current-change="getList"
                :current-page="params.pageNum"
                :page-sizes="[10,100,200,300,500]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>   


            <div>
              <el-dialog :title="form._id ? '修改' : '新增'" :visible.sync="dialogFormVisible" width="400px">
                <el-form :model="form" ref="form" :rules="rules" label-width="100px">
                
                  <el-form-item label="图片" prop="img">
                    <el-input type="text" v-model="form.img"></el-input>
                  </el-form-item>
                  <el-form-item label="标题" prop="title">
                    <el-input type="text" v-model="form.title"></el-input>
                  </el-form-item>
                  <el-form-item label="跳转地址" prop="url">
                    <el-input type="text" v-model="form.url"></el-input>
                  </el-form-item>
                  <el-form-item label="类型" prop="type">
                    <el-select v-model="form.type" placeholder="请选择">
                      <el-option
                        v-for="type in types"
                        :key="type.value"
                        :label="type.label"
                        :value="type.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submit">确 定</el-button>
                </div>
              </el-dialog>  
            </div>

                     
  </div>

  
  
</template>

<script>

export default {
  name: 'shouyeBanner',
  components: {},
  data(){
    return {
      currentPage4: 4,
      params:{
        title:'',
        type:'banner',
        pageNum:1,
        pageSise:10
      },
      rows:[],
      value1: "",
      value2: "",
      total:0,
      formInline: {
          user: '',
          region: ''
        },
      dialogFormVisible:false,
      form:{
         _id:0,
        img: "",
        type:'banner',
        url: "",
        tittle: "",
      },
      rules:{
         img: [{ required: true, message: "图片不能为空", trigger: "blur" }],//校验规则，图片不能为空
      },
      types:[
        { label: "轮播图", value: "banner" },
        { label: "分类区", value: "category" },
        { label: "为你推荐", value: "recommend" },
      ],
      selecteds:[]
    }
  },
  methods:{
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getList(pageNum) {
        if (pageNum) this.params.pageNum = pageNum;
        this.$http({
          url: '/admin/index',
          params: this.params,
        }).then(res => {
          this.total = res.total;
          this.rows = res.rows;
        })
    },
    statusChange(row) {
      this.$http({
        url: "/admin/index",
        method: "PUT",
        data: {
          indexId: row._id,
          status: row.status,
        },
      }).then((res) => {
        if (!res.errorMsg) {
          this.getList();
        }
      });
    },
      
    // 修改pageSize
    sizeChange(pageSize){
      this.params.pageSize = pageSize
      this.getList(1)
    },
    //增加
    add(){
       //初始化
       this.form= {
        _id:0,
        img: '',
        url: '',
        tittle: '',
      }
      this.dialogFormVisible = true;
    },
    //编辑
    edit(row){
      this.form = row
      this.dialogFormVisible = true;
    },
    //删除
    remove(row) {
                this.$http({
            url: "/admin/index",
            method: "DELETE",
            params:{indexId:row._id}
          }).then((res) => {
            if (!res.errorMsg) {
              this.getList(1);
            }
          });
    },
    //批量删除
    removeMore(){
           //获取选中的数据
      let checkedRowsPrmose = []
      let success = [],fail = []
      for(let i = 0;i<this.selecteds.length;i++){
        checkedRowsPrmose.push(
          new Promise(resovle => {
            let row = this.selecteds[i]
            this.$http({
            url: "/admin/index",
            method: "DELETE",
            params:{indexId:row._id}
          }).then((res) => {
            if (!res.errorMsg) {
              success.push(row._id)
            }else{
              fail.push(row._id)
            }
            resovle()
          });
          })
        )
      }
      this.$confirm('是否删除数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              //删除
        Promise.all(checkedRowsPrmose).then(() => {
          this.$message({
            message: `批量删除完成，成功删除${success.length}条数据,删除失败${fail.length}条数据`,
            duration:3000
        });
          this.getList(1)
        })
        })
    },
    submit(){
        this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.indexId = this.form._id
          this.$http({
            url: "/admin/index",
            method: this.form.indexId ? 'PUT' : 'POST',//根据indexId判断是新增还是修改
            data: this.form,
          }).then((res) => {
            if (!res.errorMsg) {
              this.dialogFormVisible = false;
              this.getList(this.form.indexId ? undefined : 1);
            }
          });
        }
      });
    },
    
    // onSubmit() {
    //   console.log('submit!');
    // }

  },
  created(){
    this.getList()
  },
  mounted(){
    
  }
}
</script>

<style>

</style>